<template>
	<view class="container">
		<view class="select-type">
			<u-input v-model="weekName" type="select" :border="true" @click="weekShow = true"/>
		</view>
		
		<u-card
			v-if="weekList.length > 0"
			title="课程列表"
			sub-title="查看教保指引"
			@head-click="weekClick">
			<view slot="body">
				<view @click="teachClick(item)" v-for="(item,index) in list" class="u-body-item u-border-bottom">
					<view style="display: flex;flex-direction: row; align-items: center;">
						<view class="title">{{item.title}}</view>
						<view>
							(月龄:{{item.dimensions}})
						</view>
					</view>
					<view class="more">
						<view v-for="(sub, subIndex) in item.detailsList" class="sub">
							{{sub.label}}:{{sub.value}}
						</view>
<!-- 						<view v-if="item.dimensions">年龄：{{item.dimensions}}</view>
						<view style="margin-left: 20rpx;" v-if="item.durations">课堂时间：{{item.durations}}</view> -->
					</view>
				</view>
			</view>
		</u-card>
		
		<u-select v-model="weekShow" :list="weekList"  @confirm="change" label-name="name" :default-value="defaultValue"></u-select>
	</view>
</template>

<script>
	import { getWeekPackageList, getWeekCourseList } from '@/api/course'
	export default {
		data() {
			return {
				weekList: [],
				weekShow: false,
				weekName: '',
				current: 0,
				defaultValue: [0],
				list: []
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id
			this.getWeekPackageList()
		},
		methods: {
			change(res) {
				console.log(res)
				this.weekName = res[0].label;
				this.defaultValue = [res[0].index]
				this.current = res[0].index;
				this.getWeekCourseList(this.weekList[res[0].index])
			},
			weekClick(item) {
				const week = this.weekList[this.current]
				this.$u.route({
					url: '/pages_teach/teach/week-detail-page',
					params: {
						id: week.id
					}
				})
			},
			
			teachClick(item) {
				this.$u.route({
					url: '/pages_teach/teach/teach-detail-page',
					params: {
						id: item.id
					}
				})
			},
			
			getWeekPackageList() {
				getWeekPackageList({vendorPackageId: this.id}).then(res => {
					console.log(res)
					this.weekList = res.data
					if (this.weekList.length > 0) {
						this.weekName = this.weekList[0].name
						this.getWeekCourseList(this.weekList[0])
					}
				})
			},
			
			getWeekCourseList(item) {
				getWeekCourseList({vendorPackageId: item.id}).then(res => {
					console.log(res)
					this.list = res.data
				})
			},
			
			details(index) {
				return JSON.parse(this.list[index].details)
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	.container{

	}
	
	.select-type{
		background-color: #FFFFFF;
		margin: 30rpx;
	}
	
	.u-body-item {
		font-size: 26rpx;
		color: #333;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 20rpx;
		padding-top: 10rpx;
		
		.title{
			font-weight: bold;
			color: $app-font-color;
			font-size: 30rpx;
		}
		
		.more{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 5rpx;
			font-size: 20rpx;
			
			.sub{
				width: 50%;
			}
		}
	}
</style>
